<template>
    <div class="mb-16">
        <div class="top-card">
            <Header elMenuClass="!bg-transparent !border-b-0" />
            <div class="flex items-center">
                <div>
                    <div class="text-5xl text-slate-900 mt-[200px] mx-16">
                        基于大语言模型的教学案例演示系统
                    </div>
                    <div class="mx-16 mt-8 text-lg">
                        借助生动动画直观展示内容，搭配 AI
                        智能辅助，为计算机学科学习高效赋能。
                    </div>
                    <div class="flex mx-16 py-8 pt-[150px] pb-[50px]">
                        <div
                            @click="() => router.push('/case-list')"
                            class="text-slate-600 text-normal font-bold border-b-1 cursor-pointer"
                        >
                            案例列表
                        </div>
                    </div>
                </div>
                <div class="flex-1 flex justify-center">
                    <!-- <logo /> -->
                    <!-- <img
                        :src="logo"
                        alt="logo"
                        class="w-[300px] h-[300px] inline-block mt-1 mr-8"
                    /> -->
                    <!-- 直接用svg -->
                    <div
                        class="w-[300px] h-[300px]"
                        :style="{
                            maskImage: `url(${logoWhite})`,
                            maskSize: 'cover',
                            maskPosition: 'center',
                            backgroundImage:
                                'linear-gradient(200deg, #c0d8f5, #c3dffd, #a3c8fd, #8ebaf7, #649fed)',
                        }"
                    ></div>
                    <!-- <Logo class="text-blue-400 w-[300px] h-[300px]" /> -->
                </div>
            </div>
        </div>
        <div class="w-8/10 mx-auto">
            <div class="text-3xl text-center mt-16 mb-8 text-slate-800">
                教学案例动画
            </div>
            <div class="w-8/10 indent mx-auto my-16 text-slate-500">
                <p class="mb-2">
                    系统涵盖了丰富多样的计算机学科相关教学案例，从硬件层面如 CPU
                    的精妙运行过程，到软件领域各类排序算法的排序流程，再到数据结构操作等全方位知识要点，皆通过精心制作的动画形式呈现。这些动画将抽象复杂的概念具象化，以直观、动态的视觉效果，帮助学习者轻松理解晦涩难懂的计算机原理和操作细节，犹如在眼前展开一幅计算机知识的画卷，让学习过程变得趣味十足且高效。
                </p>
            </div>
            <div class="mx-auto h-[400px] grid grid-cols-3 gap-0">
                <div
                    class="text-4xl text-slate-400 flex justify-center items-center border border-slate-100 bg-gradient-to-br from-slate-200 via-white"
                    v-for="item in [
                        '算法',
                        '数据结构',
                        '计算机系统',
                        '操作系统',
                        '机器学习',
                        '. . .',
                    ]"
                >
                    {{ item }}
                </div>
            </div>
            <div class="my-16 flex justify-center">
                <div
                    class="cursor-pointer text-center px-4 py-2 border border-slate-800 w-[150px] rounded-[30px] text-slate-800 hover:text-blue-400 hover:border-blue-400 transition-colors"
                >
                    案例列表
                </div>
            </div>
        </div>
        <div class="w-8/10 mx-auto">
            <div class="text-3xl text-center my-16 mt-32 text-slate-800">
                AI 智能辅助
            </div>
            <div class="w-8/10 indent mx-auto my-16 text-slate-500">
                <p class="mb-2">
                    在观看教学案例的过程中，学习者若遇到疑问，无需再四处查找资料或苦寻老师解答。本系统内置的
                    AI
                    功能随时待命，能够精准理解用户的问题，并依据深厚的计算机专业知识储备，为学习者提供详细、易懂的解答。同时，结合知识库检索增强的方式，进一步拓展了答案的深度和广度，确保每一个问题都能得到全面且有针对性的回应，真正成为学习者身边的
                    “专属计算机导师”。
                </p>
            </div>
            <div class="mx-auto h-[400px]">
                <Chat
                    helloMessage="你好，我是AI小助手，可以帮你更好的了解各个教学案例，如果在学习/观看案例的过程中有任何疑问，请随时向我提问。"
                    :knowledgeBase="{
                        id: 0,
                        title: '内置知识库，支持知识库检索',
                        collectionName: 'test'
                    }"
                />
            </div>
            <div class="my-16 flex">
                <div class="flex-1">
                    <div class="text-center mb-2 text-2xl text-slate-800">
                        知识库
                    </div>
                    <div class="flex justify-center p-12">
                        <img :src="rag" alt="知识库" />
                    </div>
                </div>
                <div class="flex-1">
                    <div class="text-center text-2xl text-slate-800">
                        支持多种大模型接入
                    </div>
                    <div class="flex justify-center p-12">
                        <img :src="multiAi" alt="支持多种大模型接入" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import logoWhite from '@/assets/logo-white.svg'
import Chat from '@/components/Chat/Chat.vue'
import Header from '@/layout/components/Header.vue'
import { useRouter } from 'vue-router'
import multiAi from './multiai.drawio.svg'
import rag from './rag.drawio.svg'

const router = useRouter()
</script>

<style scoped>
.top-card {
    /* background: linear-gradient(
        90deg,
        #97b5d3,
        #c2ccd1,
        #d0d0e2
    );  */
    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
    background: radial-gradient(
            at 96.49283077073736% 42.87202481763821%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 1) 0%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 0) 100%
        ),
        radial-gradient(
            at 21.072147853117418% 8.332825325753301%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 1)
                0%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 0)
                100%
        ),
        radial-gradient(
            at 78.47940016751653% 87.55551599150111%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 1) 0%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 0) 100%
        ),
        radial-gradient(
            at 66.39976667942473% 94.72660681024504%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 1)
                0%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 0)
                100%
        );
}
</style>
